<script setup lang="ts">

import {onMounted, ref} from "vue";
import router from "../router";

interface Movie {
  MID: string;
  fanart: string;
  poster: string;
  type: string;
  length: string;
  name: string;
  score: string;
}

const movieData = ref<Movie[]>([]);

const fetchMovieData = async () => {
  try {
    const response = await fetch('https://movie.cpb2013.top/movie_push.php?mode=top');
    const responseData = await response.json();
    if (responseData.status === 'ok') {
      movieData.value = responseData.data.map((movie: any) => ({
        MID: movie.MID,
        fanart: movie.fanart,
        poster: movie.poster,
        type: movie.type,
        length: movie.length,
        name: movie.name,
        score: movie.score,
      }));
    } else {
      console.error('Error fetching movie data:', responseData.message);
    }
  } catch (error) {
    console.error('Error fetching movie data:', error);
  }
}

onMounted(() => {
  fetchMovieData();
});

// Function to handle card click and navigate with parameters
const GoMovie = (MID: string) => {
  router.push({ path: 'movie_play', query: { MID } });
}

</script>

<template>
  <view class="img-card">
    <view class="block text-center">
      <el-carousel height="400px" motion-blur style="border-radius:20px">
        <el-carousel-item v-for="(movie, index) in movieData" :key="index" @click="GoMovie(movie.MID)">
          <view class="W_Main_cen_img_card_items">
            <view class="W_Main_cen_img_card_items_img">
              <el-image :src="movie.fanart" style="width: 100%; height: 100%;" fit="cover" />
            </view>
            <view class="W_Main_cen_img_card_items_info">
              <view class="W_Main_cen_img_card_items_info_name">
                {{movie.name}}
              </view>
              <view class="W_Main_cen_img_card_items_info_score">
                <font-awesome-icon icon="fa-regular fa-chess-queen" size="lg" style="color: #ff3d3d; margin-right: 8px" />
                {{ movie.score }}
              </view>
            </view>
          </view>
        </el-carousel-item>
      </el-carousel>
    </view>
  </view>

</template>

<style scoped>
.img-card
{
  height: 400px;
  max-width: 600px;
}
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}
.W_Main_cen_img_card_items
{
  position: relative;
  border-radius: 20px;
  cursor: pointer; /* 鼠标悬浮时显示指针 */
}
.W_Main_cen_img_card_items_info
{
  width: 100%;
  display: flex;
  position: absolute;
  padding: 15px 0px 15px 0px;
  bottom: 0;
  left: 0;
  background-color: rgba(155, 155, 155, 0.35); /* 半透明白色背景 */
  backdrop-filter: blur(5px); /* 模糊效果，用于提高半透明度的视觉效果 */
  border-radius: 0px 0px 20px 20px;
}
.W_Main_cen_img_card_items_info_score
{
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: right;
  right: 0;
  padding-right: 20px;
  width: 50%;
  color: white;
  font-size: 14px;
  font-weight: 600;
}
.W_Main_cen_img_card_items_info_name
{
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: left;
  left: 0;
  padding-left: 20px;
  width: 50%;
  color: white;
  font-size: 14px;
  font-weight: 600;
}
</style>